<template>
	<!-- 拼团 -->
	<div v-if="combinationList.length > 0" class="bulk-box" :style="{backgroundColor: config.backgroundColor}"
		style="margin-top:5rpx;padding: 0 30rpx;background: #ffffff;">
		<div class="title acea-row row-between-wrapper" style="padding:10px 0;background:white">
			<div class="text">
				<div class="name line1">拼团</div>
			</div>
			<div @click="$router.push('/pages/activity/GoodsGroup/index')" class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
		</div>
		<div class="goodsList flex" v-for="(item, index) in showCombinationList" :key="index"
			@click="$router.push({ path: '/pages/activity/GroupDetails/index',query:{id:item.id} })">
			<div class="goodsImg">
				<img :src="item.image">
			</div>
			<div class="goodsDetail">
				<div class="goodsTitle">{{item.title}}</div>
				<div class="goodsTxt">{{item.info}}</div>
				<div class="bulk-detail">
					<img src="http://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/index-design/buik.png">
					<div class="nub font13">{{item.people}}人团</div>
					<!-- <div class="suc font13">已有{{item.suc}}人进行拼团</div> -->
				</div>
				<div class="priceBox">
					<div class="bulk-price">￥{{item.price}}</div>
					<div class="bulk-origi font13">￥{{item.productPrice}}</div>
				</div>
				<div class="bulk-btn font13">去拼团</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCombinationList
	} from "@/api/public";
	export default {
		name: "combination-list",
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				combinationList: [
					{id:1,image:'https://img0.baidu.com/it/u=1369666218,220248872&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',title:'手机',info:'这是一台手机',people:20,price:15,productPrice:30},
					{id:2,image:'https://img0.baidu.com/it/u=1369666218,220248872&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',title:'手机',info:'这是一台手机',people:20,price:15,productPrice:30},
					{id:3,image:'https://img0.baidu.com/it/u=1369666218,220248872&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',title:'手机',info:'这是一台手机',people:20,price:15,productPrice:30},
					{id:4,image:'https://img0.baidu.com/it/u=1369666218,220248872&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',title:'手机',info:'这是一台手机',people:20,price:15,productPrice:30}
				]
			};
		},
		mounted() {
			// console.log("combination.config", this.config)
			// this.getData()
		},
		methods: {
			getData() {
				let param = {
					limit: this.config.count,
					page:1
				}
				getCombinationList(param).then(res => {
					if (res.status == 200) {
						this.combinationList = res.data.storeCombinationQueryVos;
					}
				})
			}
		},
		computed: {
			showCombinationList() {
				if (this.combinationList.length > this.config.count) {
					return this.combinationList.slice(0, this.config.count);
				}
				return this.combinationList;
			}
		}
	};
</script>

<style scoped>
	.more {
		font-size: 26rpx;
		color: #999999
	}

	.goodsList {
		height: 290rpx;
		/* margin-bottom: 6px; */
		padding: 0 0 10px 0;
		box-sizing: border-box;
		background: #ffffff;
		display: flex;
		align-items: center;
	}

	.goodsList .goodsDetail {
		width: 216px;
		position: relative;
		padding-left: 16px;
	}

	.goodsList .goodsImg img {
		width: 120px;
		height: 120px !important;
	}

	.goodsList .goodsTitle {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 180px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		margin-bottom: 10px;
	}

	.goodsList .goodsTxt {
		width: 180px;
		font-size: 26rpx;
		color: #999999;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: 26px;
		margin-bottom: 12px;
	}

	.goodsList .bulk-detail {
		display: -webkit-box;
		align-items: center;
	}

	.goodsList .bulk-detail img {
		width: 18px;
		height: 18px;
	}

	.goodsList .bulk-detail .nub {
		color: #ff563d;
		margin: 0 5px;
	}

	.goodsList .bulk-detail .suc {
		width: 130px;
		color: #999999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.goodsList .priceBox {
		display: -webkit-box;
		align-items: center;
		margin-top: 16px;
	}

	.goodsList .priceBox .bulk-price {
		font-weight: bold;
		color: #ff563d;
		font-size: 36rpx;
	}

	.goodsList .priceBox .bulk-origi {
		text-decoration: line-through;
		color: #999999;
		padding-left: 8px;
		padding-top: 3px;
	}

	.goodsList .bulk-btn {
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 0 14px;
		border-radius: 20px;
		background: linear-gradient(to right, #ff563d 0%, #ff563d 100%);
		line-height: 27px;
		text-align: center;
		color: #ffffff;
		margin-top: 12px;
		font-size: 26rpx;
	}

	.colorRed {
		color: #f85353;
	}

	.font16 {
		font-size: 16px;
	}

	.font14 {
		font-size: 14px;
	}

	.font13 {
		font-size: 13px;
	}

	.flex {
		display: flex;
	}
</style>
